<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://cdn.bootcss.com/qs/6.6.0/qs.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <style>
        .cube-btn {
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div><a href="/swagger-ui.html">SwaggerUI</a></div>
        <div><a href="https://www.easy-mock.com/project/5ce3669a733e8967c7b2e902">EasyMock地址</a></div>
        <div>
            <el-button @click="create">创建用户</el-button>
            <el-button @click="list">用户列表</el-button>
            <el-button @click="del">删除用户</el-button>
        </div>
        <div>
            <el-button @click="login">登入</el-button>
            <el-button @click="logout">退出登录</el-button>
            <el-button @click="getUserList">用户列表</el-button>
        </div>
        <div>
            <el-button onclick="document.getElementById('log').innerHTML = ''">Clear Log</el-button>
        </div>
        <h6 id="log"></h6>
    </div>
    <script>
        // axios.defaults.baseURL = 'http://localhost:3000'
        axios.defaults.withCredentials = true
        axios.interceptors.request.use(
            config => {
                const token = window.localStorage.getItem("token");
                if (token) {
                    // 判断是否存在token，如果存在的话，则每个http header都加上token
                    // Bearer是JWT的认证头部信息
                    config.headers.common["Authorization"] = "Bearer " + token;
                }
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        )
        axios.interceptors.response.use(
            response => {
                document.getElementById('log').append(JSON.stringify(response.data))
                return response;
            }
        );
        var app = new Vue({
            el: '#app',
            data: {
                value: 'input',
                token: {}
            },
            methods: {
                async create() {
                    await axios.post('/api/user', {
                        mobile: '13611388415',
                        password: '111111',
                        realName: '老夏',
                    })
                },
                async list() {
                    const res = await axios.get('/api/user')
                    this.list = res.data.data.list
                },
                async del() {
                    console.log('list', this.list)
                    this.list.map(v => {
                        axios.delete(`/api/user/${v._id}`)
                    })
                },
                async login() {
                    const res = await axios.post('/auth/jwt/login', {
                        mobile: '13611388415',
                        password: '111111'
                    })
                    localStorage.setItem("token", res.data.data.token);
                },
                async logout() {
                    const res = await axios.post('/auth/jwt/logout')
                    localStorage.removeItem("token");
                },
                async getUserList() {
                    await axios.get('/api/user')
                }
            },
            mounted: function () {},
        });
    </script>
</body>

</html>